<template>
  <div class="page">
    <div class="tab-box">
      <div v-for="(item, index) in tabList" @click="active = item.code" class="tab-item" :key="item.code">
        <div :class="['tab-item-text',item.code == active && 'tab-active']">{{ item.label }}</div>
      </div>
      <div class="tab-item" @click="active = 3" style="flex: 1;">
        <div :class="['tab-item-text',active == 3 && 'tab-active']">
          <img v-if="active == 3" src="../../assets/toast01.png" alt="">
          <img v-else src="../../assets/toast.png" alt="">
        </div>
      </div>
    </div>

    <!--  @click-tab="onClickTab" -->
    <van-tabs v-model:active="active" @rendered="tabRendered" class="tab-self" animated>
      <van-tab>
        <thirteen-persistency continueType="13" />
      </van-tab>
      <van-tab>
        <thirteen-persistency continueType="25" />
      </van-tab>
      <van-tab style="position: relative;">
        <premium />
      </van-tab>
      <van-tab>
        <div class="list-box">
          <div v-for="item in list" class="list-item" :key="item">
            <div class="list-item-box">
              <img src="../../assets/toast_item.png" alt="">
              <div class="list-right-box">
                <div class="list-right-top">
                  <div class="list-right-top-left">品质提醒</div>
                  <div>{{item.qualityDate ? item.qualityDate.substr(0,16) : ''}}</div>
                </div>
                <div style="margin-top: 5px;">{{item.context || ''}}</div>
              </div>
            </div>
            <van-divider class="list-divider" />
          </div>
          <div v-if="pageNum.value * 10 < list.length" style="text-align: center;">
            <van-button @click="getIndexPutQuery(10)" plain size="small" :loading="loadingMore" loading-text="加载中"
              loading-type="spinner"
              style="border: none;color: var(--van-primary-color);background-color: rgba(0, 0, 0, 0);">点击加载更多</van-button>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>

</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import mockApi from "../../api/api.js";
import card from "../../components/card.vue";
import tableCom from "../../components/tableCom.vue";
import buttons from "../../components/buttons.vue";
import thirteenPersistency from "./components/thirteenPersistency.vue";
import premium from "./components/premium.vue";

import { userStore } from "../../stores/userStore";
const currentRate = ref(0);
const text = computed(() => currentRate.value.toFixed(2) + "%");

const loadingMore = ref(false);

const tabList = ref([
  { label: "实收保费",code:2 },
  { label: "13个月继续率",code:0 },
  { label: "25个月继续率",code:1 },
]);
const active = ref(2);
const list = ref([]);
const pageNum = ref(0);
function getIndexPutQuery(pageSize) {
  let obj = {
    pageSize,
    pageNum: pageNum.value + 1,
  };
  loadingMore.value = true;
  mockApi
    .indexPutQuery(obj)
    .then((res) => {
      if (res.code == 200 && res.data) {
        list.value.push(...res.data.records);
        pageNum.value = res.data.current;
        // if(pageNum.value * pageSize < res.data.total)
      }
    })
    .finally(() => {
      loadingMore.value = false;
    });
}

function tabRendered(index, title) {
  console.log("tabRendered", index, title);
  if (index == 3 && pageNum.value == 0) {
    getIndexPutQuery(10);
  }
}
</script>

<style lang="less" scoped>
.tab-self {
  :deep(.van-tabs__wrap) {
    display: none;
  }
}
.page {
  position: relative;
  width: 100vw;
  // height: 100vh;
  min-height: 100vh;
  // background-color: #fff;
  background-image: linear-gradient(to bottom right, #e6edef, #79a6c5);
  .tab-box {
    position: relative;
    width: 100vw;
    padding: 8px 5px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f6;
    .tab-item {
      position: relative;
      width: 26%;
      height: 28px;
      .tab-item-text {
        font-size: 14px;
        text-align: center;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        color: #8b8c8f;
        font-weight: 500;
        img {
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 28px;
          margin-top: 4px;
        }
      }
      .tab-active {
        color: var(--van-primary-color);
        background-color: #fff;
        border-radius: 5px;
      }
    }
  }
}

.list-box {
  position: relative;
  padding: 0 20px;
  box-sizing: border-box;
  .list-item {
    img {
      width: 60px;
      margin-right: 10px;
    }
    .list-item-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .list-right-box {
        padding-top: 10px;
        color: #666;
        font-size: 14px;
        .list-right-top {
          display: flex;
          justify-content: space-between;
          align-items: end;
          .list-right-top-left {
            color: #333333;
            font-size: 16px;
          }
        }
      }
    }
    .list-divider {
      border-color: #999999;
    }
  }
}
</style>